<template>
    <div class="system-menu-management">
        <!-- 布局，组件 -->

        <div class="tree-container">
            <!-- <div class="title_container">菜单管理</div> -->
            <div class="filter-wrap">
                <!-- <div class="filter-lable">功能系统</div> -->
                <div class="filter-form">
                    <el-select @change="systemChange" v-model="selectSys" placeholder="请选择功能系统">
                        <el-option v-for="item in systemList" :key="item.code_value" :label="item.code_name"
                            :value="item.code_value"></el-option>
                    </el-select>
                </div>
            </div>
            <!-- <el-scrollbar style="height: 100%"> -->
            <menu_tree :treeList="treeList" @treeVal="treeVal" @addNewOne="addNewOne" @editNewOne="editNewOne"
                @deleteNewOne="deleteNewOne"></menu_tree>
            <!-- </el-scrollbar> -->
        </div>
        <!-- style="height: 600px;padding:0"> -->
        <div class="table-container">
            <menu_table :treeId="treeId"></menu_table>
        </div>

        <!-- ------------------------------------------------- -->
        <!-- 新增弹窗 -->
        <el-dialog title="添加新的菜单" :visible.sync="addshow" :close-on-click-modal="false" @close="dialogClose('addForm')">
            <el-form :model="addForm" :rules="addRules" ref="addForm" label-width="150px">
                <el-form-item label="菜单名称" prop="menu_name">
                    <el-input maxlength="20" v-model="addForm.menu_name" placeholder="请输入菜单名称"></el-input>
                </el-form-item>
                <el-form-item label="菜单路由">
                    <el-input maxlength="100" v-model="addForm.route_path" placeholder="请输入菜单路由"></el-input>
                </el-form-item>
                <el-form-item label="父菜单名称" prop="parent_menu_id">
                    <el-input maxlength="20" v-model="addForm.parent_menu" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="功能系统" prop="sys_code">
                    <el-select style="width:100%;" v-model="addForm.sys_code" :disabled="true" placeholder="请选择功能系统">
                        <el-option v-for="item in systemList" :key="item.code_value" :label="item.code_name"
                            :value="item.code_value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="排序" prop="seq_num">
                    <el-input oninput="if(value.length>3)value=value.slice(0,3)" v-model="addForm.seq_num"
                        placeholder="请输入菜单排序" type="number"></el-input>
                </el-form-item>
                <el-form-item label="图标">
                    <el-input maxlength="50" v-model="addForm.icon" placeholder="请输入图标路径"></el-input>
                </el-form-item>
                <el-form-item label="菜单描述">
                    <el-input maxlength="200" type="textarea" v-model="addForm.menu_desc" placeholder="请输入菜单描述"
                        resize="none"></el-input>
                </el-form-item>
            </el-form>

            <div slot="footer" class="dialog-footer">
                <el-button @click="addshow = false" size="small">取 消</el-button>
                <el-button class="btn-class" type="primary" @click="menuTreeAddCommit" size="small">确 定</el-button>
            </div>
        </el-dialog>
        <!-- ------------------------------------------------- -->
        <!-- 修改弹窗 -->
        <el-dialog title="修改菜单" :visible.sync="editshow" :close-on-click-modal="false" @close="dialogClose('editForm')">
            <el-form :model="editForm" :rules="editRules" ref="editForm" label-width="150px">
                <el-form-item label="菜单名称" prop="menu_name">
                    <el-input maxlength="20" v-model="editForm.menu_name" placeholder="请输入菜单名称"></el-input>
                </el-form-item>
                <el-form-item label="菜单路由">
                    <el-input maxlength="50" v-model="editForm.route_path" placeholder="请输入菜单路由"></el-input>
                </el-form-item>
                <el-form-item label="父菜单名称" prop="parent_menu_id">
                    <el-input maxlength="20" v-model="editForm.parent_menu_name" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="功能系统" prop="sys_code">
                    <el-select style="width:100%;" v-model="editForm.sys_code" :disabled="true" placeholder="请选择功能系统">
                        <el-option v-for="item in systemList" :key="item.code_value" :label="item.code_name"
                            :value="item.code_value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="排序" prop="seq_num">
                    <el-input oninput="if(value.length>3)value=value.slice(0,3)" v-model="editForm.seq_num"
                        type="number" placeholder="请输入菜单排序"></el-input>
                </el-form-item>
                <el-form-item label="图标">
                    <el-input maxlength="50" v-model="editForm.icon" placeholder="请输入图标路径"></el-input>
                </el-form-item>
                <el-form-item label="菜单描述">
                    <el-input maxlength="200" type="textarea" v-model="editForm.menu_desc" placeholder="请输入菜单描述">
                    </el-input>
                </el-form-item>
            </el-form>

            <div slot="footer" class="dialog-footer">
                <el-button @click="editshow = false" size="small">取 消</el-button>
                <el-button class="btn-class" type="primary" @click="menuTreeEditCommit" size="small">确 定</el-button>
            </div>
        </el-dialog>
        <!-- -----------------------------------------------  -->
    </div>
</template>
<script>
import * as api from "@/http/admin-api.js";
import menu_table from "./comons/menu_table";
import menu_tree from "./comons/menu_tree";
export default {
    components: {
        menu_table: menu_table,
        menu_tree: menu_tree
    },
    data() {
        return {
            flag: true,
            treeList: [],
            treeData: "",

            addshow: false,
            addForm: {
                menu_name: "",
                menu_desc: "",
                parent_menu: "",
                parent_menu_id: "",
                route_path: "",
                icon: "",
                seq_num: "",
                sys_code: ""
            },
            addRules: {
                menu_name: [
                    {
                        required: true,
                        message: "请填写菜单名称",
                        trigger: "blur"
                    }
                ],
                parent_menu_id: [
                    { required: true, message: "请选择父菜单", trigger: "blur" }
                ],
                seq_num: [
                    { required: true, message: "请填写排序", trigger: "blur" }
                ]
            },

            editshow: false,
            editForm: {
                menu_id: "",
                menu_name: "",
                menu_desc: "",
                parent_menu: "",
                parent_menu_id: "",
                route_path: "",
                icon: "",
                seq_num: "",
                sys_code: ""
            },
            editRules: {
                menu_name: [
                    {
                        required: true,
                        message: "请填写菜单名称",
                        trigger: "blur"
                    }
                ],
                parent_menu_id: [
                    { required: true, message: "请选择父菜单", trigger: "blur" }
                ],
                seq_num: [
                    { required: true, message: "请填写排序", trigger: "blur" }
                ]
            },
            treeId: "",
            selectSys: "",
            selectSysObj: {}
        };
    },
    computed: {
        systemList() {
            if (!this.selectSys) {
                this.selectSys =
                    this.$store.state.index.systemList.length > 0
                        ? this.$store.state.index.systemList[0].code_value
                        : "";
                this.selectSysObj =
                    this.$store.state.index.systemList.length > 0
                        ? this.$store.state.index.systemList[0]
                        : {};
                this.getMenuTree();
            }
            return this.$store.state.index.systemList;
        }
    },
    methods: {
        /**
         * 功能系统表单改变回调
         */
        systemChange(e) {
            this.selectSys = e;
            this.selectSysObj = this.systemList.filter(
                item => item.code_value == e
            )[0];
            this.getMenuTree();
        },
        // 获取树图
        getMenuTree() {
            api.getMenuTree({
                sys_code: this.selectSys
            }).then(res => {
                if (res) {
                    this.treeList = res.bus_json;
                }
            });
        },
        // 树节点点击或更换时来自tree的传值
        treeVal(val) {
            this.treeData = val;
            this.treeId = this.treeData.menu_id;
        },
        // tree新增按钮点击
        addNewOne() {
            this.addForm = {
                menu_name: "",
                menu_desc: "",
                parent_menu: "",
                parent_menu_id: "",
                route_path: "",
                icon: "",
                seq_num: ""
            };
            if (this.treeData.menu_id) {
                this.addshow = true;
                this.addForm.parent_menu = this.treeData.menu_name;
                this.addForm.parent_menu_id = this.treeData.menu_id;
                this.addForm.sys_code = this.selectSysObj.code_value;
            } else {
                this.$message({
                    message: "请选择父菜单",
                    type: "warning"
                });
            }
        },
        // 新增提交
        menuTreeAddCommit() {
            this.$refs["addForm"].validate(valid => {
                if (valid) {
                    if (this.flag) {
                        this.flag = false;
                        api.menuTreeAddCommit({
                            menu_name: this.addForm.menu_name,
                            parent_menu_id: this.addForm.parent_menu_id,
                            seq_num: this.addForm.seq_num,
                            menu_desc: this.addForm.menu_desc,
                            route_path: this.addForm.route_path,
                            icon: this.addForm.icon,
                            sys_code: this.selectSysObj.code_value
                        }).then(res => {
                            if (res) {
                                this.addshow = false;
                                this.$message({
                                    message: res.error_msg,
                                    type: "success"
                                });
                                this.getMenuTree();
                                setTimeout(() => {
                                    this.flag = true;
                                }, 1500);
                            }
                        });
                    }
                }
            });
        },
        // 所有关闭dialog的清除验证的回调
        dialogClose(formName) {
            this.$nextTick(() => {
                this.$refs[formName].resetFields();
            });
        },
        // tree修改按钮点击,获取详情
        editNewOne() {
            this.editForm = {
                menu_id: "",
                menu_name: "",
                menu_desc: "",
                parent_menu: "",
                parent_menu_id: "",
                route_path: "",
                icon: "",
                seq_num: ""
            };
            if (this.treeData.menu_id !== "0000") {
                if (this.treeData.menu_id && this.flag) {
                    this.flag = false;
                    api.getMenuTreeInfoById({
                        menu_id: this.treeData.menu_id
                    }).then(res => {
                        if (res) {
                            console.log(res);
                            this.editshow = true;
                            this.editForm = {
                                menu_id: res.bus_json.menu_id,
                                menu_name: res.bus_json.menu_name,
                                menu_desc: res.bus_json.menu_desc,
                                parent_menu_name: res.bus_json.parent_menu_name,
                                parent_menu_id: res.bus_json.parent_menu_id,
                                route_path: res.bus_json.route_path,
                                icon: res.bus_json.icon,
                                seq_num: res.bus_json.seq_num
                            };
                            this.editForm.sys_code = this.selectSysObj.code_value;
                            setTimeout(() => {
                                this.flag = true;
                            }, 1500);
                        }
                    });
                } else {
                    this.$message({
                        message: "请选择菜单",
                        type: "warning"
                    });
                }
            } else {
                this.$message({
                    message: "禁止修改根目录",
                    type: "warning"
                });
            }
        },
        //树菜单修改提交
        menuTreeEditCommit() {
            this.$refs["editForm"].validate(valid => {
                if (valid) {
                    if (this.flag) {
                        api.menuTreeEditCommit({
                            menu_id: this.editForm.menu_id,
                            menu_name: this.editForm.menu_name,
                            menu_desc: this.editForm.menu_desc,
                            parent_menu_id: this.editForm.parent_menu_id,
                            route_path: this.editForm.route_path,
                            icon: this.editForm.icon,
                            seq_num: this.editForm.seq_num,
                            sys_code: this.selectSysObj.code_value
                        }).then(res => {
                            if (res) {
                                this.editshow = false;
                                this.$message({
                                    message: res.error_msg,
                                    type: "success"
                                });
                                this.getMenuTree();
                                setTimeout(() => {
                                    this.flag = true;
                                }, 1500);
                            }
                        });
                    }
                }
            });
        },
        // 删除按钮点击
        deleteNewOne() {
            this.$confirm("确认删除该数据？", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            })
                .then(() => {
                    api.menuTreeDeleteCommit({
                        menu_id: this.treeData.menu_id
                    }).then(res => {
                        if (res) {
                            this.$message({
                                type: "success",
                                message: res.error_msg
                            });
                            this.getMenuTree();
                        }
                    });
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "未删除"
                    });
                });
        }
    },
    created() {
        // this.getMenuTree();
    }
};
</script>
<style lang='scss'>
.system-menu-management {
    width: 100%;
    height: 100%;
    background: #fff;
    display: inline-flex;
    padding: 10px;
    box-sizing: border-box;

    .filter-form {
        width: 100%;

        .el-select {
            width: 100%;
        }
    }

    .tree-container {
        width: 280px;
        height: 100%;
        padding-right: 20px;
        margin-right: 20px;
        border-right: 1px solid rgb(179, 202, 222);
        overflow-x: hidden;

        .el-scrollbar__wrap {
            overflow-x: hidden;
        }
    }

    .title_container {
        width: 100%;
        text-indent: 20px;
        text-align: left;
        font-size: 16px;
        line-height: 40px;
        height: 40px;
        color: #484848;
        border-bottom: 1px solid #efefef;
    }

    .table-container {
        width: calc(100% - 280px - 40px);
    }

    .el-scrollbar__wrap {
        overflow-x: hidden;
    }

    .filter-wrap {
        display: inline-flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        margin-top: 10px;
        font-size: 14px;

        .el-input__inner {
            height: 30px;
            line-height: 30px;
        }

        .el-input__prefix,
        .el-input__suffix {
            display: flex;
            align-items: center;
        }
    }
}
</style>

